<template>
	<view class="main">
		<view class="top_Fixed" :style="{'height':statusBarHeight+'px'}"></view>
		<view class="map_top flex_left">
			<view class="map_top_left">
				<image class="driver_icon" src="/static/img/back_map.png" @click="back()"></image>
			</view>
		</view>


		<view class="map_bottom_box" v-if="callCarStatus == '0'">
			<image class="map_bottom_bg" src="/static/img/bg9.png"></image>
			<view class="map_bottom_bg">
				<view class="map_notice flex_left">
					<image class="map_notice_icon" src="/static/img/notice.png"></image>
					<view class="map_notice_word">
						<view class="map_notice_word_row">
							This itinerary passes through a toll road section. If there is
						</view>
						<view class="map_notice_word_row">
							a highway toll, it will be charged separately. You are already
						</view>
						<view class="map_notice_word_row">
							on the optimal route
						</view>
					</view>
				</view>

				<view class="car_list">
					<!-- 汽车 -->
					<view class="car_row flex_between">
						<view class="car_left flex_left">
							<image class="car_icon" src="/static/img/carX.png"></image>
							<view class="car_info">
								<view class="car_name">Local train</view>
								<view class="car_people_num">Up to 4 people can be seated</view>
							</view>
						</view>
						<view class="car_right">
							<view class="car_type">Estimate</view>
							<view class="car_price">MK8000</view>
						</view>
					</view>
					<!-- 摩托 -->
					<view class="car_row flex_between">
						<view class="car_left flex_left">
							<image class="car_iconX" src="/static/img/motorcycle.png"></image>
							<view class="car_info">
								<view class="car_name">Local train</view>
								<view class="car_people_num">Up to 4 people can be seated</view>
							</view>
						</view>
						<view class="car_right">
							<view class="car_type">Estimate</view>
							<view class="car_price">MK8000</view>
						</view>
					</view>
					<!-- 三轮 -->
					<view class="car_row flex_between">
						<view class="car_left flex_left">
							<image class="car_iconX" src="/static/img/motorcycle_three.png"></image>
							<view class="car_info">
								<view class="car_name">Local train</view>
								<view class="car_people_num">Up to 4 people can be seated</view>
							</view>
						</view>
						<view class="car_right">
							<view class="car_type">Estimate</view>
							<view class="car_price">MK8000</view>
						</view>
					</view>
				</view>

				<view class="car_pay_bottom">
					<view class="car_bottom_type flex_center">
						<view class="car_type_left car_type_left_border flex_left">
							<image class="car_type_icon" src="/static/img/wallet_pay.png"></image>
							<view class="car_type_name">Cash</view>
						</view>
						<view class="car_type_left flex_left">
							<image class="car_type_icon" src="/static/img/coupon.png"></image>
							<view class="car_type_name">-MK10</view>
						</view>
					</view>
					<view class="car_pay flex_center" @click="callCarStatus = '1'">Payment Order</view>
				</view>
			</view>
		</view>

		<view class="map_bottom_box" v-if="callCarStatus == '1'">
			<image class="map_bottom_bg" src="/static/img/bg9.png"></image>
			<view class="map_bottom_bg">
				<view class="map_notice flex_left">
					<image class="map_notice_icon" src="/static/img/notice.png"></image>
					<view class="map_notice_word">
						<view class="map_notice_word_row">
							This itinerary passes through a toll road section. If there is
						</view>
						<view class="map_notice_word_row">
							a highway toll, it will be charged separately. You are already
						</view>
						<view class="map_notice_word_row">
							on the optimal route
						</view>
					</view>
				</view>
				<view class="wait_row flex_between">
					<view class="wait_left">
						<view class="wait_name">Searching for vehicles</view>
						<view class="wait_notice">Vehicle searching, please be patient and wait</view>
						<view class="wait_time">Waiting : 00:02:32</view>
					</view>
					<view class="wait_right">
						<image class="wait_car_icon" src="/static/img/carX.png"></image>
						<view class="loading_bg">
							<image class="loading_icon" src="/static/img/loading.gif"></image>
						</view>
					</view>
				</view>
				<view class="wait_area">
					<view class="wait_area_row flex_left">
						<view class="wait_start_point"></view>
						<view class="wait_start_word">Starting point positioning name</view>
					</view>
					<view class="wait_area_row flex_left">
						<view class="wait_end_point"></view>
						<view class="wait_start_word">Destination Address</view>
					</view>
				</view>
				<view class="wait_pay_row flex_left">
					<image class="wait_pay_icon" src="/static/img/wallet_pay.png"></image>
					<view class="wait_pay_word">Payment method: </view>
					<view class="wait_pay_name">Cash</view>
				</view>
				<view class="wait_pay_row flex_left">
					<image class="wait_pay_icon" src="/static/img/coupon.png"></image>
					<view class="wait_pay_word">Discount: </view>
					<view class="wait_pay_name">-MK10</view>
				</view>
				<view class="car_pay_bottom">
					<view class="car_pay_bottom_top flex_between">
						<view class="car_pay_bottom_left">Total fare:</view>
						<view class="car_pay_bottom_right">MK100 </view>
					</view>
					<view class="car_pay flex_center" @click="callCarStatus = '2'">Cancel order</view>
				</view>
			</view>
		</view>


		<view class="map_bottom_box" v-if="callCarStatus == '2'">
			<image class="map_bottom_bg" src="/static/img/bg9.png"></image>
			<view class="map_bottom_bg">
				<view class="arrive_top flex_between">
					<view class="arrive_left flex_left">
						<image class="time_icon" src="/static/img/time.png"></image>
						<view class="arrive_word_box">
							<view class="arrive_word_title"> The driver has arrived</view>
							<view class="arrive_word_long">1.0km away from you</view>
						</view>
					</view>
					<view class="arrive_right">00：05：21</view>
				</view>
				<view class="arrive_car flex_between">
					<view class="arrive_car_left">
						<view class="arrive_car_name">L-2323-RF</view>
						<view class="arrive_car_type">Toyota HR-V . White</view>
					</view>
					<image class="arrive_car_icon" src="/static/img/carX.png"></image>
				</view>
				<view class="arrive_car_area flex_between">
					<view class="arrive_driver_left flex_left">
						<image class="arrive_driver_img" src="/static/img/man.png"></image>
						<view class="arrive_driver_name">Driver name</view>
					</view>
					<image class="phone_icon" src="/static/img/phone.png"></image>
				</view>
				<view class="wait_area">
					<view class="wait_area_row flex_left">
						<view class="wait_start_point"></view>
						<view class="wait_start_word">Starting point positioning name</view>
					</view>
					<view class="wait_area_row flex_left">
						<view class="wait_end_point"></view>
						<view class="wait_start_word">Destination Address</view>
					</view>
				</view>
				<view class="car_pay flex_center" @click="callCarStatus = '3'">Cancel order</view>
			</view>
		</view>

		<view class="map_bottom_box" v-if="callCarStatus == '3'">
			<image class="map_bottom_bg" src="/static/img/bg9.png"></image>
			<view class="map_bottom_bg">
				<view class="arrive_top flex_left">
					<image class="loca_icon" src="/static/img/location.png"></image>
					<view class="arrive_word_box">
						<view class="arrive_word_title">The driver has arrived</view>
						<view class="arrive_word_long">The driver has arrived at the boarding point</view>
					</view>
				</view>
				<view class="arrive_car flex_between">
					<view class="arrive_car_left">
						<view class="arrive_car_name">L-2323-RF</view>
						<view class="arrive_car_type">Toyota HR-V . White</view>
					</view>
					<image class="arrive_car_icon" src="/static/img/carX.png"></image>
				</view>
				<view class="arrive_car_area flex_between">
					<view class="arrive_driver_left flex_left">
						<image class="arrive_driver_img" src="/static/img/man.png"></image>
						<view class="arrive_driver_name">Driver name</view>
					</view>
					<image class="phone_icon" src="/static/img/phone.png"></image>
				</view>
				<view class="wait_area">
					<view class="wait_area_row flex_left">
						<view class="wait_start_point"></view>
						<view class="wait_start_word">Starting point positioning name</view>
					</view>
					<view class="wait_area_row flex_left">
						<view class="wait_end_point"></view>
						<view class="wait_start_word">Destination Address</view>
					</view>
				</view>
				<view class="arrive_driver_name flex_center" @click="showWarn = true">点击展示弹起</view>
			</view>
		</view>


		<view class="modal" v-if="showWarn" @click="showWarn = false">
			<view class="call_police">
				<view class="call_police_row flex_left">
					<image class="call_police_icon" src="/static/img/police.png"></image>
					<view class="call_police_word">Call the police</view>
				</view>
				<view class="call_police_row flex_left">
					<image class="call_police_icon" src="/static/img/warnphone.png"></image>
					<view class="call_police_word">Emergency contact</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		req_
	} from '../../api/api.js';
	import {
		Loader
	} from '@googlemaps/js-api-loader';
	export default {
		data() {
			return {
				statusBarHeight: 0,
				// 当前地图实例
				map: null,
				// 渲染地图缩放等级，具体数字详见google map文档
				zoom: 8,
				// 渲染地图中心坐标
				center: {
					lat: '',
					lng: '',
					address: ''
				},
				markers: [],
				callCarStatus: '0',
				showWarn: false
			}
		},
		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		mounted() {
			// this.initMap()
		},
		onShow() {

		},
		methods: {
			initMap() {
				const loader = new Loader({
					apiKey: 'AIzaSyD7A0vrfdfZHnlkLGwrVxzs3_NOAUDhTSw', // 替换为你的API密钥
					version: 'weekly',
					libraries: ['places'],
					language: 'en'
				});
				console.log(loader)

				loader.load().then(() => {
					console.log('google =ssss==', loader)
				}).catch(err => {
					console.log('google =err==', err)
				})


				// 导入google map地图类
				loader.importLibrary("maps");
				loader.importLibrary("core");

				// 导入google map地点类
				loader.importLibrary("geocoding");
			},
			// 调用方法
			getList() {
				let data = {

				}
				req_(data).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			back() {
				this.utils.Back()
			}
		},
		onReachBottom() {

		},
		onPullDownRefresh() {

		}
	}
</script>

<style scoped>
	.map_top {
		padding: 15rpx 0;
		width: 100%;
	}

	.map_top_left {
		width: 77rpx;
		height: 77rpx;
		margin: 0 24rpx;
	}

	.driver_icon {
		width: 100%;
		height: 100%;
	}

	.map_bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 755rpx;
		background: #FFFFFF;
		padding-bottom: 50rpx;
	}

	.map_bottom_bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 755rpx;
		padding-bottom: 50rpx;
	}

	.map_notice {
		width: 92%;
		margin: 20rpx auto;
	}

	.map_notice_icon {
		width: 53rpx;
		height: 56rpx;
	}

	.map_notice_word {
		margin-left: 30rpx;
		width: 80%;
		height: 80rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #000000;
	}

	.map_notice_word_row {
		width: 100%;
		font-weight: 400;
		font-size: 20rpx;
		color: #000000;
	}

	.car_row {
		margin: 10rpx auto;
		width: 92%;
		height: 140rpx;
		background: #EFF9FA;
		border-radius: 10rpx;
	}

	.car_icon {
		width: 168rpx;
		height: 78rpx;
		margin-left: 30rpx;
	}

	.car_iconX {
		width: 104rpx;
		height: 102rpx;
		margin-left: 30rpx;
	}

	.car_info {
		margin-left: 20rpx;
	}

	.car_name {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.car_people_num {
		font-weight: 400;
		font-size: 20rpx;
		color: #787878;
	}

	.car_right {
		margin-right: 30rpx;
	}

	.car_type {
		text-align: right;
		font-weight: 400;
		font-size: 20rpx;
		color: #787878;
	}

	.car_price {
		text-align: right;
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	.car_pay_bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(15, 15, 15, 0.11);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		z-index: 99;
		padding-bottom: 30rpx;
		background: #FFFFFF;
	}

	.car_bottom_type {
		width: 92%;
		margin: 30rpx auto;
	}

	.car_type_left {
		width: 50%;
		height: 40rpx;
	}

	.car_type_left_border {
		border-right: 1rpx solid #BFBFBF;
	}

	.car_type_icon {
		width: 44rpx;
		height: 44rpx;
		margin: 0 25rpx;
	}

	.car_type_name {
		font-weight: 400;
		font-size: 30rpx;
		color: #000000;
	}

	.car_pay {
		margin: 0 auto;
		width: 90%;
		height: 92rpx;
		background: #34BA78;
		border-radius: 46rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	/* 类型1 */
	.wait_row {
		width: 92%;
		margin: 30rpx auto;
	}

	.wait_name {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.wait_notice {
		font-weight: 400;
		font-size: 20rpx;
		color: #787878;
		margin: 10rpx 0;
	}

	.wait_time {
		font-weight: bold;
		font-size: 24rpx;
		color: #181A19;
	}

	.wait_right {
		position: relative;
		width: 210rpx;
		height: 95rpx;
	}

	.wait_car_icon {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.loading_bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 77rpx;
		height: 77rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(15, 15, 15, 0.11);
		border-radius: 50%;
	}

	.loading_icon {
		width: 95%;
		height: 95%;
		margin: 5rpx;
	}

	.wait_area {
		width: 92%;
		margin: 30rpx auto;
		height: 170rpx;
		background: #F4F4F4;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.wait_area_row {
		width: 90%;
		height: 45%;
		margin: 0 auto;
	}

	.wait_start_point {
		width: 18rpx;
		height: 18rpx;
		background: #FFAA44;
		border-radius: 9rpx;
	}

	.wait_end_point {
		width: 18rpx;
		height: 18rpx;
		background: #33BA78;
		border-radius: 9rpx;
	}

	.wait_start_word {
		margin-left: 20rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.wait_pay_row {
		width: 92%;
		margin: 30rpx auto;
	}

	.wait_pay_icon {
		width: 29rpx;
		height: 27rpx;
	}

	.wait_pay_word {
		margin-left: 30rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #757575;
	}

	.wait_pay_name {
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
	}

	.car_pay_bottom_top {
		padding: 20rpx 30rpx;
	}

	.car_pay_bottom_left {
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}

	.car_pay_bottom_right {
		font-weight: bold;
		font-size: 24rpx;
		color: #000000;
	}

	/* 类型2 */
	.arrive_top {
		width: 92%;
		margin: 30rpx auto;
	}

	.time_icon {
		width: 53rpx;
		height: 56rpx;
	}

	.arrive_word_box {
		margin-left: 20rpx;
	}

	.arrive_word_title {
		font-weight: bold;
		font-size: 26rpx;
		color: #000000;
	}

	.arrive_word_long {
		margin-top: 30rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #787878;
	}

	.arrive_right {
		font-weight: bold;
		font-size: 26rpx;
		color: #000000;
	}

	.arrive_car {
		width: 92%;
		margin: 30rpx auto;
	}

	.arrive_car_name {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.arrive_car_type {
		margin-top: 26rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #787878;
	}

	.arrive_car_icon {
		width: 210rpx;
		height: 95rpx;
	}

	.arrive_car_area {
		width: 92%;
		margin: 30rpx auto;
		height: 170rpx;
		background: #F4F4F4;
		border-radius: 30rpx;
	}

	.arrive_driver_img {
		width: 97rpx;
		height: 97rpx;
		border-radius: 50%;
		margin: 0 30rpx;
	}

	.arrive_driver_name {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.phone_icon {
		width: 67rpx;
		height: 67rpx;
		margin-right: 68rpx;
	}

	.loca_icon {
		width: 48rpx;
		height: 60rpx;
	}

	.modal {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
	}

	.call_police {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 446rpx;
		background: #F7F7F7;
		border-radius: 60rpx 60rpx 10rpx 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.call_police_row {
		width: 92%;
		margin: 0 auto;
		height: 150rpx;
	}

	.call_police_icon {
		width: 62rpx;
		height: 62rpx;
	}

	.call_police_word {
		margin-left: 36rpx;
		font-weight: bold;
		font-size: 36rpx;
		color: #262626;
	}
</style>